<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floral Beige Gallery - Free CSS Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />

<!--////// CHOOSE ONE OF THE 3 PIROBOX STYLES  \\\\\\\-->
<link href="css_pirobox/white/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<!--<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />-->
<!--////// END  \\\\\\\-->

<!--////// INCLUDE THE JS AND PIROBOX OPTION IN YOUR HEADER  \\\\\\\-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/piroBox.1_2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().piroBox({
			my_speed: 600, //animation speed
			bg_alpha: 0.5, //background opacity
			radius: 4, //caption rounded corner
			scrollImage : false, // true == image follows the page, false == image remains in the same open position
			pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
			pirobox_prev : 'piro_prev',// Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
			close_all : '.piro_close',// add class .piro_overlay(with comma)if you want overlay click close piroBox
			slideShow : 'slideshow', // just delete slideshow between '' if you don't want it.
			slideSpeed : 4 //slideshow duration in seconds(3 to 6 Recommended)
	});
});
</script>
<!--////// END  \\\\\\\-->

</head>
<body>

<div id="templatemo_wrapper_outer">

	<div id="templatemo_wrapper">
    
    	<%include header.ejs%>
    
    
        <div id="templatemo_main_wrapper">
            <div id="templatemo_main">
            
                <div id="content">
                
                    <div class="content_box">
                    
                        <h2>项目画廊</h2>
                        <p>这里记录了我从业以来所经手的主要项目，见证了我的职业历程，从一个一无所知的小白。到一个萌萌懂懂程序猿，我相信总有拨开云雾见青天的时候。</p>
                        
                        <div class="cleaner_h40"></div>
                    
                        <div id="gallery">
							<div class="gallery_box">
                                <div class="left">
                                    <a href="images/gallery/image_01_b.jpg" class="pirobox" title="Project 1"><img src="images/gallery/image_01.jpg" alt="1" /></a>
                                </div>
                                <div class="right">
                                    <h5>天府志愿通</h5>
                                    <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus egestas diam quis dapibus.</em></p>
                                    <p>Quisque sed mauris velit, a congue lorem. Aliquam quis mi sed libero dapibus iaculis a et mi. Egestas diam quis dapibus. Quisque sed mauris velit, a congue lorem. </p>
                                    <div class="btn_more"><a href="#">Visit site <span>&raquo;</span></a> </div>
                                </div>
                                <div class="cleaner"></div>
                            </div>
                            
                            <div class="gallery_box">
                                <div class="left">
                                    <a href="images/gallery/image_02_b.jpg" class="pirobox" title="Project 1"><img src="images/gallery/image_02.jpg" alt="2" /></a>
                                </div>
                              <div class="right">
                                  <h5>Project 2</h5>
                                  <p><em>Cras id tortor nisl. Nullam ante diam, interdum sit amet. Velit justo sodales lectus, ac porta nunc.</em></p>
                                  <p>Maecenas eros ipsum, tincidunt vitae ultricies id, blandit quis nulla. Fusce sem nulla, rutrum ac suscipit eget, commodo vitae est. In at orci arcu, .</p>
                                   <div class="btn_more"><a href="#">Visit site <span>&raquo;</span></a> </div>
                              </div>
                                <div class="cleaner"></div>
                            </div>
                            
                            <div class="gallery_box">
                                <div class="left">
                                    <a href="images/gallery/image_03_b.jpg" class="pirobox" title="Project 1"><img src="images/gallery/image_03.jpg" alt="3" /></a>
                                </div>
                                <div class="right">
                                    <h5>Project 3</h5>
                                  <p><em>Integer consectetur enim eget diam tincidunt vehicula. Cras id tortor nisl. Nullam ante diam, interdum sit.</em></p>
                                  <p>Sodales nec, mollis lobortis sapien. Vestibulum pharetra tortor vitae velit pretium rhoncus integer consectetur enim eget.</p>
                                   <div class="btn_more"><a href="#">Visit site <span>&raquo;</span></a> </div>
                              </div>
                                 <div class="cleaner"></div>
                            </div>
                            
                            <div class="gallery_box last">
                                <div class="left">
                                    <a href="images/gallery/image_04_b.jpg" class="pirobox" title="Project 1"><img src="images/gallery/image_04.jpg" alt="4" /></a>
                                </div>
                                <div class="right">
                                    <h5>Project 4</h5>
                                    <p><em>Ut volutpat erat nec mauris vestibulum sit amet pharetra.</em></p>
                                    <p>Ut volutpat erat nec mauris vestibulum sit amet pharetra urna faucibus. Ut magna orci, varius eget ullamcorper ac, sodales id leof usce venenatis .</p>
                                   <div class="btn_more"><a href="#">Visit site <span>&raquo;</span></a> </div>
                                </div>
                                <div class="cleaner"></div>
                            </div>
                            
	                    </div>	
                    </div>
                    
                    <div class="cleaner"></div>
                </div> <!-- end of content -->
                
                <div id="sidebar">
                
                	<div class="rss">
                    	<a href="#">Subscribe our Feed</a>
                    </div>
                
                	<div class="sidebar_box">
                    
                    	<h3>线上项目</h3>
                        
                        <ul class="tmo_list">
                        	<li>Validate <a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><strong>XHTML</strong></a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><strong>CSS</strong></a></li>
                            <li><a href="#">天府志愿通 www.tfzyt.cn</a></li>
                            <li><a href="#">宝点网 www.bao.cn</a></li>
                            <li><a href="#">宝点网是手机端 mobile.bao.cn</a></li>
                            <li><a href="#">Vivamus tincidunt vehicula</a></li>
                            <li><a href="#">Maecenas sodales pede eu</a></li>
                            <li><a href="#">Quisque at nulla eu elit</a></li>
                        </ul>
                    </div>
                    
                    <div class="sidebar_box">
                    
                    	<h3>线下项目</h3>
                        
                        <ul class="recent_comment">
                        
                        	<li><a href="#" class="author">1</a> <a href="#" class="post_title">行云物料验收系统</a></li>
                            
                            <li><a href="#" class="author">2</a> <a href="#" class="post_title">蓝光房源管理系统</a></li>
                            
                            <li><a href="#" class="author">3</a> <a href="#" class="post_title"></a></li>
                            
                            <li><a href="#" class="author">4</a>  <a href="#" class="post_title">Pellentesque vehicula odio sed dui ullamcorper </a></li>
                            
                            <li><a href="#" class="author">5</a>  <a href="#" class="post_title">Suspendisse sit amet nisi id enim euismod</a></li>
                            
                        </ul>
                        
                    </div>
                    
                    <div class="ads"><a href="#"><img src="images/templatemo.jpg" alt="templatemo" /></a></div>
                    
                    <div class="ads"><a href="#"><img src="images/flashmo.jpg" alt="flashmo" /></a></div>
                
                </div> <!-- end of sidebar -->
                
                <div class="cleaner"></div>
            </div>
        </div> <!-- end of main wrapper -->
    </div> <!-- end of wrapper -->
    
   <%include footer.ejs%>
       
</div>
<!-- templatemo 295 floral beige -->
<!-- 
Floral Beige Template 
http://www.templatemo.com/preview/templatemo_295_floral_beige 
-->
</body>
</html>